<template>
  <div class="no-data-container flex flex-col items-center justify-center h-[200px]">
    <img :src="Placeholder" alt="待发布内容为空" class="placeholder-img" />
    <p class="txt1">待发布内容为空</p>
    <p class="txt2">你还没有添加任何新闻，快去新闻池挑选合适的新闻吧</p>
    <el-button type="primary" @click="gotoNewspool">前往新闻池</el-button>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import Placeholder from '@/assets/404.svg?url';

const router = useRouter();

const gotoNewspool = () => {
  router.replace({ name: 'newspool' });
};
</script>

<style scoped>
.no-data-container {
  margin: 20px 0;
  gap: 16px; /* 控制元素间距，更美观 */
}

.placeholder-img {
  width: 120px;
  height: 120px;
  opacity: 0.6; /* 降低图片透明度，避免过于突兀 */
}

.txt1 {
  font-size: 20px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.85);
  margin: 0;
}

.txt2 {
  font-size: 14px;
  color: #999;
  margin: 0;
  text-align: center;
  max-width: 300px; /* 限制文字宽度，避免换行混乱 */
}
</style>